<template>
	<view class="content">
		<view class="center-box">
			<view class="center-panel">

				<!-- 选择性别 -->
				<view class="form-item">
					<view class="gender-select">
						<view class="gender-item" @click="genderChange('男')">
							<image src="../../static/boy-a.png" mode=""
								:class="{'gender-selected':formData.gender == '男'}"></image>
							<view :class="{'gender-selected-t':formData.gender == '男'}">
								男
							</view>
						</view>
						<view class="gender-item" @click="genderChange('女')">
							<image src="../../static/girl-a.png" mode=""
								:class="{'gender-selected':formData.gender == '女'}"></image>
							<view :class="{'gender-selected-t':formData.gender == '女'}">
								女
							</view>
						</view>
						<view class="gender-item" @click="genderChange('未知')">
							<image src="../../static/unknow.png" mode=""
								:class="{'gender-selected':formData.gender == '未知'}"
								style="box-sizing: border-box;padding: 4px;">
							</image>
							<view :class="{'gender-selected-t':formData.gender == '未知'}">
								未知
							</view>
						</view>
					</view>

				</view>




				<!-- 输入姓氏 -->
				<view class="form-item">
					<view class="form-item-label">
						姓名：
					</view>
					<view class="form-item-content">
						<input type="text" class="input" v-model.trim="formData.name">
					</view>
				</view>


				<!-- 出生时间 -->
				<view class="form-item">
					<view class="form-item-label">
						出生时间：
					</view>
					<view class="form-item-content">
						<view class="input" @click="openTimePicker"> {{ formData.date }}</view>
					</view>
				</view>


				<!-- 出生地点 -->
				<view class="form-item">
					<view class="form-item-label">
						出生地点：
					</view>
					<view class="form-item-content">
						<view class="input" @click="open"> {{ formData.area }}</view>
					</view>
				</view>


			</view>

			<button class="submit" @click="submitForm"> 解释姓名 </button>
		</view>
		<uv-datetime-picker ref="datetimePicker" mode="datetime" v-model="datetime" @confirm="dateTimeConfirm">
		</uv-datetime-picker>


		<uv-picker ref="areaPicker" :columns="addressList" keyName="name" @change="areaChange"
			@confirm="areaConfirm"></uv-picker>



	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		timeFormat,
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'

	/*------------表单数据--------------*/
	const formData = ref({
		gender: "男",
		name: "",
		date: "",
		area: "",
	})



	/*------------选择性别--------------*/
	const genderChange = (val) => {
		formData.value.gender = val
	}



	/*------------出生日期--------------*/
	const datetimePicker = ref()
	const datetime = ref(Number(new Date()))

	function dateTimeConfirm(e) {
		formData.value.date = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
	}
	const openTimePicker = () => {
		datetimePicker.value?.open()
	}


	/*------------出生地点--------------*/
	import useArea from '@/hooks/useArea.js'
	const [areaPicker, addressList, areaChange, areaConfirm, open] = useArea((area) => {
		formData.value.area = area;
	})




	/*------------提交表单--------------*/
	import {
		isChinese,
		containKeywords
	} from '@/utils/index.js'
	const submitForm = () => {

		// uni.navigateTo({
		// 	url: `/pages/generate/generate?gender=${formData.value.gender}&isBorn=${formData.value.isBorn}&firstName=${formData.value.firstName}&date=${formData.value.date}&area=${formData.value.area}&character=${formData.value.character}&fixedword=${formData.value.fixedword}&fixedpos=${formData.value.fixedpos}`
		// })

		// 验证姓氏
		if (!formData.value.name || formData.value.name.length > 4 || !isChinese(formData.value.name) ||
			containKeywords(formData.value.name)) {
			toast("姓名不符合要求")
		} else {

			// 验证出生时间
			if (!formData.value.date) {
				toast("请选择出生时间")
			} else {
				// 验证出生地点
				if (!formData.value.area) {
					toast("请选择出生地点")
				} else {

					console.log("表单验证通过！")

					uni.navigateTo({
						url: `/pages/explain-result/explain-result?gender=${formData.value.gender}&name=${formData.value.name}&date=${formData.value.date}&area=${formData.value.area}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.center-box {
		width: 90vw;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.submit {
			width: 90vw;
			height: 100rpx;
			line-height: 100rpx;
			background-color: red;
			color: #fff;
			font-size: 40rpx;
			border: 24rpx;
			margin-top: 32rpx;
		}


		.center-panel {
			box-sizing: border-box;
			padding: 20px;
			border-radius: 12px;
			font-size: 40px;
			color: #333;
			font-weight: bold;

			.form-item {
				display: flex;
				margin-top: 12px;

				.form-item-label {
					width: 160rpx;
					font-size: 32rpx;
					height: 40px;
					line-height: 40px;

				}

				.form-item-content {
					flex: 1;
					font-size: 40rpx;
					position: relative;

					.word-pos {
						display: inline-block;
						text-align: center;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						background-color: #bbb;
						padding: 6px;
						border-radius: 20px;
						font-size: 32rpx;
						color: #fff;
						position: absolute;
						z-index: 10;
						top: 50%;
						right: 6px;
						transform: translateY(-50%);

						&:nth-of-type(1) {
							right: 90rpx;
						}

						&.active {
							background-color: red;
						}
					}




				}


				.gender-select {
					display: flex;
					width: 100%;
					font-size: 40rpx;
					text-align: center;

					.gender-item {
						flex: 1;

						image {
							width: 120rpx;
							height: 120rpx;
							box-sizing: border-box;
							border-radius: 120rpx;
						}

						.gender-selected {
							border: solid 4rpx red;
						}

						.gender-selected-t {
							color: red;
							font-weight: bold;
						}
					}
				}
			}
		}
	}


	radio-group {
		label {
			margin-left: 30rpx;

			radio {
				// border: solid 1px #f00;
				// border-radius: 40px;
			}
		}
	}


	.input {
		min-height: 80rpx;
		line-height: 80rpx;
		background-color: #eee;
		padding: 3px 12px;
		border-radius: 4px;
		font-size: 40rpx;
	}




	.popup-panel {
		min-height: 200px;
		width: 100%;
		background-color: #fff;

		.popup-top {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			display: flex;
			color: #333;
			border-bottom: solid 2rpx #ddd;
			margin-bottom: 10rpx;

			.popup-close {
				width: 80px;
				color: #666;
			}

			.popup-ok {
				width: 80px;
				color: red;
			}

			.popup-title {
				flex: 1
			}

		}

		.character-tags {
			display: flex;
			flex-wrap: wrap;

			.character-tag {
				width: 25vw;
				box-sizing: border-box;
				padding: 16rpx;

				.tag-inner {
					background-color: #eee;
					border-radius: 4px;
					font-size: 28rpx;
					text-align: center;
					box-sizing: border-box;
					padding: 16rpx 0;
					color: #333;
				}

				.tag-active {
					background-color: red;
					color: #fff;
				}
			}

		}
	}
</style>